import { useState,useEffect,useCallback } from 'react';//生命状态，生命周期;大括号命名导出
import './App.css';
import Home from './Home'
import Topic from './Topic'
import Header from './Header'
import Collection from './Collection'
import {BrowserRouter,Route,Switch} from 'react-router-dom';


const style={
  lineHeight:'100px',
  textAlign:'center',
  height:100,
  fontWeight:'bold',
  background:'pink'
}

const App=()=>{
  return(
    <BrowserRouter>
    <header style={style}><Header/></header>
      <Route exact path='/'>
        <Home/>
      </Route>
      {/* 配置动态路由 */}
      <Route path='/topic/:id'>
        <Topic/>
      </Route>
      <Route path='/collection'>
        <Collection/>
      </Route>
    </BrowserRouter>
  )
}











//function App() { 
// const App = () =>{
//   // const ele=<div className="App"> hello</div>//对象
//   // //最终只能return一个div里面，可以嵌套div，相当于返回一个对象
//   // return (
//   //   ele
//   // );


//   //实现点击按钮加一
//   const [num,setNum]=useState(0);
//   const add=()=>setNum(num+1)
//   // const add=useCallback(()=>{
//   //   return setNum(num+1)
//   // },[num])

//   //每隔两秒加一
//   const [num2,setNum2]=useState(0);
  
//   // setInterval(()=>{
//   //   setNum2(num2+1)//执行的频率会越来也快：状态更新会重新调用函数组件，定时器开的越来越多
//   // },2000)

//   useEffect(()=>{
//     let timer=setInterval(()=>{//依赖项是num2的话，不能开定时器的
//       // console.log(num2)//拿不到最新值,每次都是0
//       // setNum2(num2+1)//执行的频率会越来也快：状态更新会重新调用函数组件，定时器开的越来越多
//       setNum2(a=>a+1)//返回值的形式确保每次拿到最新的值
//     },2000)

//     return ()=>{//在函数销毁时执行
//       clearInterval(timer)

//     }
//   },[])//依赖项变时调用函数，空数组只执行一次

//   return (
//     <div className="App">
//       <Home/>


//       hello



//       <h2>第一种：{num}</h2>
//       <button onClick={()=>setNum(num+1)}>+1</button> 
//       {/*
//       ×<button onClick={setNum(num+1)}>+1</button> 不点击时就会调用函数，而且函数没有返回值
//       √<button onClick={()=>setNum((num)=>num+1)}>+1</button>
//       √<button onClick={()=>setNum(num+1)}>+1</button> 
//       √<button onClick={add}>+1</button> 
//       */}
      
//       {/* <h2>第二种：{num2}</h2> */}
      
//     </div>
//   )
// }







export default App;
